<template>
<view class="container">
  <view class="tabs">
    <u-tabs :list="tabs" :activeStyle="activeStyle" :itemStyle="itemStyle"  @click="click"></u-tabs>
  </view>
  <view class="content">
    <view class="header">
      <image class="bg" :src="$Config.get('imageUrl')+'/data/head.png'" mode="scaleToFill"/>
      <view class="content">
        <view class="p1">累计总营收(元)</view>
        <view class="p2">{{ options.totalRevenue }}</view>
      </view>
    </view>
    <view class="box">
      <view class="item" v-for="(item,i) in list">
        <view class="bar-body">
          <view class="bar" :class="[item.totalRevenue-0 > 0?'active':'']" :style="{'width':getWidth(item.totalRevenue)}">
            <span>{{item.revenueTime}}</span>
            <span>{{item.totalRevenue}}</span>
          </view>
        </view>
        <view class="more">
          <span>数据清单</span>
          <text class="iconfont icon-right"></text>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
export default {
  data(){
    return {
      list:[],
      tabs:[
        {
          name:"累计营收",
          value:0
        },
        {
          name:"今年",
          value:1
        },
        {
          name:"近三月",
          value:2
        },
        {
          name:"本月",
          value:3
        }
      ],
      activeStyle:{
        'font-weight': '500',
        'font-size': '28rpx',
        'color': '#2E3138'
      },
      itemStyle:{
        'height': '60rpx',
        'font-weight': '400',
        'font-size': '28rpx',
        'color': '#000000'
      },
      options:null,
      showType:0,
      max:0,
      startDate:0,
      endDate:0,
      mode:'normal' // normal filter
    }
  },
  onLoad(options) {
    this.options = options
  },
  onShow() {
    this.getList()
  },
  methods:{
    getList(){
      let params = {
        cityId:this.options.cityId,
        startDate:this.startDate,
        endDate:this.endDate
      }
      if(this.showType == 0){
        delete params.startDate;
        delete params.endDate;
      }
      this.$request.get('wx/revenue/detailByCity',params).then(({data})=>{
        this.list = data.items;
        this.getMax();
      }).catch(err=>{
        this.$toast(err.errmsg)
      })
    },
    click(e){
      this.showType = e.value;
      let data = {};
      if(e.value == 1) {
        data = this.getYearDate();
      }
      else if(e.value == 2) {
        data = this.getMonth3Date();
      }
      else if(e.value == 3) {
        data = this.getMonthDate();
      }
      if(e.value != 0){
        this.startDate = data.startDate;
        this.endDate = data.endDate;
      }else{
        this.startDate = 0;
        this.endDate = 0;
      }
      this.getList();
    },
    getYearDate(){
      //获取今年的开始时间和结束时间
      let date = new Date();
      let year = date.getFullYear();
      let startDate = new Date(year,0,1).getTime();
      let endDate = new Date(year,11,31).getTime();
      return {startDate,endDate}
    },
    getMonth3Date(){
      //获取近三月的开始时间和结束时间
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth()+1;
      let startDate = new Date(year,month-2,1).getTime();
      let endDate = new Date(year,month,0).getTime();
      return {startDate,endDate}
    },
    getMonthDate(){
      //获取本月的开始时间和结束时间
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth();
      let startDate = new Date(year,month,1).getTime();
      let endDate = new Date(year,month+1,0).getTime();
      return {startDate,endDate}
    },
    getWidth(value){
      return value/this.max*100+'%'
    },
    getMax(){
      let arr = []
      this.list.forEach(item=>{
        arr.push(item.totalRevenue)
      })
      this.max = Math.max(...arr);
      // console.log(this.max)
    },
    handleToggleMode(){
      if(this.mode == 'normal'){
        this.mode = 'filter'
      }else{
        this.mode = 'normal'
      }
    },
    close(){
      this.mode = 'normal'
    },
    open(){
      this.mode = 'filter'
    },
  },
}
</script>

<style scoped lang="scss">
.container{
  background: #F7F7F7;
  min-height: 100vh;
  .tabs{
    padding: 20rpx 40rpx;
  }
  .content{
    padding: 0rpx 40rpx;
    box-sizing: border-box;
  }
  .header{
    height: 400rpx;
    border-radius: 26rpx 26rpx 0 0;
    color: #FFF;
    position: relative;
    overflow: hidden;
    .content{
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .p1{
      font-size: 24rpx;
      font-weight: 500;
      color: #FFFFFF;
    }
    .p2{
      font-size: 64rpx;
      font-weight: 500;
      color: #FFFFFF;
      margin-top: 10rpx;
    }
    .bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  }
  .box{
    background: #FFF;
    border-radius: 10rpx;
    margin-top: 20rpx;
    padding: 20rpx 20rpx 20rpx 0;
    .item{
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap:20rpx;
      margin-bottom: 20rpx;
      .bar-body{
        flex: 1;
        height: 100%;
      }
      .bar{
        height: 100%;
        min-width: 40%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #B5B5B5;
        border-radius: 2rpx;
        padding: 0 12rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #FFFFFF;
        box-sizing: border-box;
      }
      .active{
        background: #1777FF;
      }
      .more{
        display: flex;
        align-items: center;
        font-size: 20rpx;
        font-weight: 400;
        color: #242323;
        .iconfont{
          color: #242323;
          font-size: 24rpx;
          margin-top: 4rpx;
        }
      }
    }
  }
}
</style>